<template>
  <div>
    <div>
      <a-radio-group v-model="musicValue">
        <a-radio-button :value="1">音乐</a-radio-button>
        <a-radio-button :value="2">视频</a-radio-button>
      </a-radio-group>
    </div>
    <div v-if="musicValue==1">
      <!-- <a-button type="primary" style="margin-top:14px;">添加自定义音乐</a-button> -->
      <a-upload :beforeUpload="beforeUpload" class="upload-list-inline" :showUploadList="false">
        <a-button type="primary" style="margin-top:14px;">添加自定义音乐</a-button>
      </a-upload>
      <div style="margin: 8px;color: #999;">文件大小 < 5M，格式支持MP3，最多上传10首</div>
      <!-- <s-table ref="table" :columns="musicColumns" :data="musicData" class="user_management_table"></s-table> -->
    </div>
    <div v-else>
      <a-upload
        :beforeUpload="beforeUploadVideo"
        class="upload-list-inline"
        :showUploadList="false"
      >
        <a-button type="primary" style="margin-top:14px;">添加自定义视频</a-button>
      </a-upload>
      <div style="margin: 8px;color: #999;">文件大小<100M，格式支持mp4，最多上传5个</div>
      <!-- <s-table ref="table" :columns="videoColumns" :data="videoData" class="user_management_table"></s-table> -->
    </div>
    <a-modal
      title="添加自定义音乐"
      :visible="musicVisible"
      :confirm-loading="musicConfirmLoading"
      @ok="musicHandleOk"
      @cancel="musicHandleCancel"
    >
      <div class="title mb8">1.选择本地文件</div>
      <div class="mb8">
        <a-upload :beforeUpload="beforeUpload" class="upload-list-inline" :showUploadList="false">
          <a-button type="primary">重新添加</a-button>
        </a-upload>
        <div v-if="fileList.length>0">
          <div class="mt8">
            <img
              src="~@/assets/img/music.png"
              alt
              style="width: 12px; height: 12px; margin-right: 2px;"
            />
            <span style="color: rgb(153, 153, 153); font-size: 12px;">{{fileName}}</span>
            <img
              src="~@/assets/img/close.png"
              alt
              style="width: 12px; height: 12px; margin-left: 32px; cursor: pointer;"
              @click="delMusic"
            />
          </div>
          <div class="upload-success">
            <span class="iconfont icon-success successtitle"></span>上传成功
          </div>
        </div>
      </div>
      <div class="title mb8">2.完善信息</div>
      <div>
        <a-form-model
          ref="unloadRuleForm"
          :model="musicForm"
          :rules="musicRules"
          :label-col="{ span: 4 }"
          :wrapper-col=" { span: 14 }"
        >
          <a-form-model-item label="歌曲名称：" prop="musicName">
            <a-input v-model="musicForm.musicName" placeholder="请输入歌曲名称，最多7个字" :maxLength="7"></a-input>
          </a-form-model-item>
        </a-form-model>
      </div>
    </a-modal>

    <a-modal
      title="添加自定义视频"
      :visible="videoVisible"
      :confirm-loading="videoConfirmLoading"
      @ok="videoHandleOk"
      @cancel="videoHandleCancel"
    >
      <div class="mb8">
          <div>1、请遵守国家法律、法规，切勿上传暴力、色情、反动、诈骗、侵权等违规内容，产生的法律责任将由您自行承担。</div>
          <div>
              2、上传视频视为您已同意 <span style="color: rgb(254, 170, 125); cursor: pointer;">《视频上传服务协议》</span>
          </div>
      </div>
      <div class="title mb8">1.选择本地文件</div>
      <div class="mb8">
        <a-upload :beforeUpload="beforeUpload" class="upload-list-inline" :showUploadList="false">
          <a-button type="primary">重新添加</a-button>
        </a-upload>
        <div v-if="videoFileList.length>0">
          <div class="mt8 viedo-content">
            <video
              :src="videoFileList[0]"
              alt
              style="width: 40px; height: 40px; margin-right: 2px;"
            />
            <span style="color: rgb(153, 153, 153); font-size: 12px;">{{videoName}}</span>
            <img
              src="~@/assets/img/close.png"
              alt
              style="width: 12px; height: 12px; margin-left: 32px; cursor: pointer;"
              @click="delVedio"
            />
          </div>
          <div class="upload-success">
            <span class="iconfont icon-success successtitle"></span>上传成功
          </div>
        </div>
      </div>
      <div class="title mb8">2.完善信息</div>
      <div>
        <a-form-model
          ref="unloadRuleForm"
          :model="videoForm"
          :rules="videoRules"
          :label-col="{ span: 4 }"
          :wrapper-col=" { span: 14 }"
        >
          <a-form-model-item label="视频名称：" prop="videoName">
            <a-input v-model="videoForm.videoName" placeholder="请输入视频名称，最多12个字" :maxLength="12"></a-input>
          </a-form-model-item>
          <a-form-model-item label="视频封面：">
            <uploadImg @imgUrl1="coverUrl"/>
            <div style="position: relative;top: -25px;">请上传小于5M的jpg、png图片</div>
          </a-form-model-item>
           <!-- <a-form-model-item label=' '>
             
           </a-form-model-item> -->
        </a-form-model>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { STable } from '@/components'
import { uploadPic } from '@/api/login'
import uploadImg from '@/components/uploadImg'
export default {
  components: {
    STable,
    uploadImg
  },
  data() {
    return {
      musicForm: {
        musicName: undefined,
      },
      musicRules: {
        musicName: [
          { required: true, message: '请输入歌曲名称', trigger: 'blur' },
        ],
      },

        videoForm: {
        videoName: undefined,
      },
      videoRules: {
        videoName: [
          { required: true, message: '请输入视频名称', trigger: 'blur' },
        ],
      },


      musicVisible: false,
      musicConfirmLoading: false,
      videoVisible: false,
      videoConfirmLoading: false,
      musicValue: 1,
      //音乐
      musicColumns: [
        //    title: '订单号',
        //   dataIndex: 'order_no',
        //   width: 250,
        //   fixed: 'left',
        //   scopedSlots: { customRender: 'order_no' }
        {
          title: '序号',
        },
        {
          title: '歌曲名称',
        },
        {
          title: '时长',
        },
        {
          title: '操作',
        },
      ],
      //   musicData:[
      //       {

      //       }
      //   ],

      // 视频
      videoColumns: [
        {
          title: '序号',
        },
        {
          title: '视频名称',
        },
        {
          title: '视频',
        },
        {
          title: '时长',
        },
        {
          title: '文件大小',
        },
        {
          title: '操作',
        },
      ],
      fileList: [],
      fileName: null,
      videoFileList: [],
      videoName: null,
    }
  },
  methods: {
    //音乐上传前
    beforeUpload(file) {
    console.log(file);
      let isMusic = file.type === 'audio/mp3'
      if (!isMusic) {
        this.$message.error('只能上传音乐！')
        return
      }
      let musicSize=5*1024*1024
      if(file.size>musicSize){
        this.$message.error('音乐文件大于5M！')
        return
      }
      const formData = new FormData()
      formData.append('file', file)
      // formData.append('school_id', this.$store.state.user.school)
      uploadPic(formData)
        .then((res) => {
          this.fileList = []
          this.fileList.push(res.url)
          this.fileName = file.name
          this.musicVisible = true
        })
        .catch((err) => {
          this.$message.error(err.data.message || '上传失败,请检查上传文件或稍后重试')
        })
      return false
    },
    musicHandleOk() {
      this.musicConfirmLoading = false
      this.musicVisible = false
      this.musicConfirmLoading = false
    },
    musicHandleCancel() {
      this.musicVisible = false
    },
    delMusic() {
      this.fileList = []
      this.fileName = null
    },
    delVedio(){
        this.videoFileList = []
        this.videoName = null
    },
    beforeUploadVideo(file) {
        console.log(file);
      let isVideo =
        (file.type === file.type) === 'video/ogg' ||
        file.type === 'video/flv' ||
        file.type === 'video/avi' ||
        file.type === 'video/wmv' ||
        file.type === 'video/mov' ||
        file.type === 'video/mp4'
      if (!isVideo) {
        this.$message.error('只能上传视频！')
        return
      }
      let size = 1024 * 100*1024
      if (file.size > size) {
        this.$message.error('视频文件大于100M！')
      }
      const formData = new FormData()
      formData.append('file', file)
      uploadPic(formData)
        .then((res) => {
          this.videoFileList = []
          this.videoFileList.push(res.url)
          this.videoName = file.name
          this.videoVisible = true
        })
        .catch((err) => {
          this.$message.error(err.data.message || '上传失败,请检查上传文件或稍后重试')
        })
      return false
    },
    videoHandleOk() {
      this.videoConfirmLoading = true
      this.videoVisible = false
      this.videoConfirmLoading = false
    },
    videoHandleCancel() {
      this.videoVisible = false
    },
    coverUrl(e){
      console.log(e,123)
    }
  },
}
</script>

<style lang="less" scoped>
@import '~@/assets/iconfont/iconfont.css';
.mt8 {
  margin-top: 8px !important;
}
.mb8 {
  margin-bottom: 8px !important;
}
.upload-success {
  color: #52c41a;
}
.title {
  font-size: 16px;
  color: #333;
}
.viedo-content{
    display: flex;
    align-items: center;
}
// .ant-upload.ant-upload-select-picture-card{
//   width: 78px !important;
//   height: 80px !important;
// }
</style>